<template>
	<el-drawer title="配置项" class="flow-node-form-property-drawer" :visible.sync="show" :before-close="handleClose" :destroy-on-close="true" size='40%'>
		<div class="flow-node-form">
			<div class="flow-node-form-body">
				<flow-node-form-condition :typeProp="type" :dataProp="getConditionData" @saveNode="saveNode" v-if="type == 'node'"></flow-node-form-condition>
				<flow-node-form-condition :typeProp="type" :dataProp="getConditionData" @saveLine="saveLine" v-if="type == 'line'"></flow-node-form-condition>
			</div>
		</div>
	</el-drawer>
</template>

<script>
	import {
		cloneDeep
	} from 'lodash'
	import FlowNodeFormCondition from './node_form_condition'

	export default {
		props: {
			dataProp: {
				type: Object,
				default: () => {}
			},
			lineProp: {
				type: Object,
				default: () => {}
			},
			nodeProp: {
				type: Object,
				default: () => {}
			},
			typeProp: {
				type: String,
				default: 'node'
			},
			openProp: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: true,
				// node 或 line
				type: this.typeProp,
				node: this.nodeProp,
				line: this.lineProp,
				data: this.dataProp,
				show: this.openProp
			}
		},
		components: {
			FlowNodeFormCondition
		},
		computed: {
			getConditionData() {
				let str = {}
				if (this.type === 'line') {
					//console.log('getConditionData_line', this.line)
					str = cloneDeep(this.line || {})
				}
				if (this.type === 'node') {
					//console.log('getConditionData_node', this.node)
					str = cloneDeep(this.node || {})
				}
				return str
			}
		},
		watch: {
			'openProp'(val) {
				this.show = val
			},
			'show'(val) {
				this.$emit('update:openProp', val)
			},
			'typeProp'(val) {
				this.type = val
			},
			'dataProp': {
				handler(n, o) {
					this.data = n
				},
				deep: true
			},
			'nodeProp': {
				handler(n, o) {
					this.node = n
					console.log('nodeform_nodeProp', n)
				},
				deep: true
			},
			'lineProp': {
				handler(n, o) {
					this.line = n
					console.log('nodeform_lineProp', n)
				},
				deep: true
			}
		},
		methods: {
			//关闭配置项抽屉
			handleClose(done) {
				done();
			},
			// 修改连线
			saveLine(lineData) {
				console.log(lineData)
				this.$emit('setLine', this.line.from, this.line.to, this.getPropertyName(lineData), lineData)
				this.show = false
			},
			// 修改节点
			saveNode(nodeData, extraData) {
				console.log(nodeData)
				this.$emit('setNode', this.node.id, nodeData, extraData)
				this.show = false
			},
			getPropertyName(data) {
				let label = '';
				data.forEach(item => {
					label += ' ' + item.name
				})
				return label
			}
		}
	}
</script>

<style>
	.flow-node-form-property-drawer .el-drawer.rtl{
		height: auto;
		min-height: 100%;
		overflow-y: auto;
	}
	.flow-node-form-body {
		margin: 0 15px;
	}
</style>
